<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>拖动</title>
	<link rel="stylesheet" href="./css/styles.css">
	<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="./js/draggabilly.pkgd.min.js"></script>
	<script type="text/javascript" src="./js/draggabilly.pkgd.js"></script>
	<script src="./js/doc-ready.js"></script>
	<script type="text/javascript" src="./js/scripts.js"></script>
	<script type="text/javascript">
	$(function(){
		var  windowHeight= $(window).height();
    	var  windowWidth= $(window).width();
    	$('.example-frame #container,.two').css({
    	    width: windowWidth+"px",
    	    height: windowHeight+"px",    
    	})
        // 外框 
    	$('.example-frame,.left,.right').css({
    	    width: windowWidth+"px",
    	    height: windowHeight+"px",
    	})
        // 拖拽
        var _this=$('.draggie');
		var container = document.querySelector('#container');
		var elems = container.querySelectorAll('.draggie');
		// 给container里的每一个元素加拖动事件，TRUE为在框内
		for ( var i=0, len = elems.length; i < len; i++ ) {
		  var elem = elems[i];
		  new Draggabilly( elem, {
		      containment: true
		  });
		}
        // 下落
    	_this.animate({top:600 +'px', left: '100px'}, 2000);
        // 触摸判断距离
        var touchEvents = {
            touchend: "touchend",
            touchmove:"touchmove",
            touchstart:"touchstart",
            touch:'touch',
            //判断是否pc设备，若是pc，需要更改touch事件为鼠标事件，否则默认触摸事件   
            initTouchEvents: function () {
                if (isPC()) {
                    this.touchend = "mouseup";
                    this.touchstart = "mousemove";
                }
            }
        };
        // 离开触摸屏时获得此时拖动元素的距离，来判断事件是否触发
        _this.bind(touchEvents.touchend, function () {
            var height = _this.offset().top;
            var width = _this.offset().left;
            var left = $('.left');
            var right = $('.right');
           var two = $('.two');
            // 移动到moveheight这个距离和这个距离之间就触发事件
            var moveheight = windowHeight*0.35;
            var movewidth = windowWidth*0.35;
            var moveheight1= windowHeight*0.65;
            var movewidth1 = windowWidth*0.65;
            if (height>=moveheight&&height<=moveheight1&&width>=movewidth&&width<=movewidth1) {
                $('#k').hide();
                two.delay(500).animate({top:'-2000px'}, 1000);
                left.animate({left: -windowWidth*3 +'px'}, 1500);//左移动
                right.animate({left: windowWidth*3 +'px'}, 1500);//右移动
                _this.hide();$('#container').hide();
                
            };
            
        });
        // 将盒子往上滑动
        var start = $('.start');
        start.bind(touchEvents.touchmove, function (){
            start.animate({top:-windowHeight+'px' }, 1500);
        })
        // 将自己选择的承诺往上移动
        $('.list-box').bind(touchEvents.touchmove, function (){
            $(this).animate({top:-windowHeight+'px' }, 1500);
            $('.choose-box').delay(1500).hide();
        })
        // 选择你的承诺
        var li = $('.choose ul li');
        var list = $('.list-box .list');
        var choose = $('.choose');
        var two = $('.two');
        var c = $('.choose ul .c');
        var ul = $('.choose ul');
        // 点击跑到相应的页面
        
        var one = './images/1.png',sleep = './images/sleep.png',two='./images/2.png',family= 'images/family.png',three = './images/3.png',eat = 'images/eat.png',four = './images/4.png',sport = './images/sport.png',five = './images/5.png',water = 'images/water.png';
        // 设li的宽度
        li.css({
            height:windowWidth*0.1+'px' ,
        });
        // 单击颜色变化
        li.on(touchEvents.touchstart, function (){
            var eq = $(this).index();
            $('.hi').val(eq);
            var num = eq+1;
            switch (num) {
                case 1:
                    li.eq(0).css({
                       background: 'url('+one+')no-repeat 0px 0px',
                       'background-size':'100% 100%', 
                    });
                    li.eq(1).css({
                       background: 'url('+family+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(2).css({
                       background: 'url('+eat+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(3).css({
                       background: 'url('+sport+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(4).css({
                       background: 'url('+water+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    break;alert(num)
                case 2:
                    li.eq(1).css({
                       background: 'url('+two+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(0).css({
                       background: 'url('+sleep+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(2).css({
                       background: 'url('+eat+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(3).css({
                       background: 'url('+sport+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(4).css({
                       background: 'url('+water+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    break;
                case 3:
                    li.eq(2).css({
                       background: 'url('+three+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(0).css({
                       background: 'url('+sleep+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(1).css({
                       background: 'url('+family+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(3).css({
                       background: 'url(./images/sport.png)no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(4).css({
                       background: 'url('+water+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    break;
                case 4:
                    li.eq(3).css({
                       background: 'url('+four+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(0).css({
                       background: 'url('+sleep+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(1).css({
                       background: 'url('+family+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(2).css({
                       background: 'url('+eat+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(4).css({
                       background: 'url('+water+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    break;
                case 5:
                    li.eq(4).css({
                       background: 'url('+five+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(1).css({
                       background: 'url('+family+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(2).css({
                       background: 'url('+eat+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                     li.eq(3).css({
                       background: 'url('+sport+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });
                    li.eq(0).css({
                       background: 'url('+sleep+')no-repeat 0px 0px',
                        'background-size':'100% 100%', 
                    });                    
                    break;
            }                  
        });
        // 点击提交按钮时显示提交的页面
        $('#btn').on(touchEvents.touchstart, function (){
            $('.list-box').css({
                'z-index': '7',                
            });
            var v = $('.hi').val();
            list.eq(v).css({
                'z-index': '8',
            }).siblings('.list').css({
                'z-index': '6',
            });
            $('.reg').show();
        })       
    })
	</script>
</head>
<body>
    <!-- 外框 -->
	<div class="example-frame">
    <!-- 被拖拖动框的父级 -->
	    <div id="container" class="example">
        <!-- 被拖拖动的框 -->
    	    <div class="draggie">
                
            </div>
	    </div>
        <!-- 开启您的健康之旅-->
        <div class="two" id="k" style="z-index:9"><img src="./images/first.png" height="100%" width="100%" alt=""></div>
	    <div class="two">
	  		<div class="left">
	  			<img src="./images/left.png" height="100%" width="100%" alt="">
	  		</div>
	  		<div class="right">
	  			<img src="./images/right.png" height="100%" width="100%" alt="">
	  		</div>
	    </div>
        <div class="start" >
            
        </div>
        <!-- 选择你的承诺 -->
        <div class="choose-box">
            <div class="choose">
                <p style="width:70%;margin:50px auto 20px auto;margin-top:6.5%"><img src="./images/title.png" style="width:100%" alt=""></p>
                <ul>
                    <li class="li1" id="li1">睡觉</li>
                    <li class="li2">陪家人</li>
                    <li class="li3">每天都吃饭</li>
                    <li class="li4">坚持锻炼</li>
                    <li class="li5">每天和8杯水</li>
                    <input type="hidden" style="display:none" class ="hi" value="1">
                </ul>
                <p style="width:70%;margin:50px auto 20px auto;"><button id="btn" style="background:url(./images/btn.png)no-repeat 0px 0px;margin:0px auto;height:60px;display:block;width:25%;border:none"></button></p>
                <p style="width:40%;margin:50px auto 20px auto;margin-top:6.5%"><img src="./images/choose.png" style="width:100%" alt=""></p>
            </div>
            <!-- 承诺对应的页面 --> 
            <div class="list-box">
                <div class="list sleep"><h1>睡觉</h1></div>
                <div class="list togther"><h1>陪家人</h1></div>
                <div class="list eat"><h1>每天都吃饭</h1></div>
                <div class="list exercise"><h1>坚持锻炼</h1></div>
                <div class="list water"><h1>每天喝8杯水</h1></div>
            </div>
        </div>
        <!-- 注册页面 -->
        <div class="reg" style="display:none;">
            <form action="" class="form" method="post" name="reg-form">
                <input type="text" name="username" id="user"> <br/>
                <input type="password" name="pwd" id="pwd" >
            </form>
        </div>
	</div>
</body>

</html>